<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>多根节点</title>
        <style>
            v-cloak { display: none; }
            body { padding: 0; margin: 0; }
            header { height: 15vh; background: #5985fb; }
            main { height: 70vh; background: #abffff; }
            footer { height: 15vh; background: #ff7033; }
            .wrapper { line-height: 70vh; text-align: center; font-size: 10rem; }
            .wrapper::before {
                content: 'hello'
            }
        </style>
    </head>
    <div>

        <div id="app" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const CustomLayout = {
                template: `<header></header>
                           <main v-bind="$attrs"></main>
                           <footer></footer>`
            }

            const root = {
                components: {
                    CustomLayout
                },
                template: `<div class="root">
                              <CustomLayout class="wrapper"></CustomLayout>
                           </div>`,
                data() {
                    return {
                        pandaName: '大美'
                    }
                },
                methods: {
                    input(value) {
                        this.pandaName = value;
                    },
                    show() {
                        alert( this.pandaName );
                    }
                }
            }

            Vue.createApp(root).mount( '#app' );
        </script>
    </div>
</html>